<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#divA
			{
				width: 200px;
				height: 200px;
				background-color: lightsalmon;
				padding: 10px;
			}
			
			#divB
			{
				
					width: 100px;
					height: 100px;
					background-color: lightblue;
					padding: 10px;
			}
			#divC
			{
				
					width: 50px;
					height: 50px;
					background-color: lightgoldenrodyellow;
					padding: 10px;
			}
			
		</style>
	</head>
	<body>
		<div id="divA">
			<div id="divB">
				<div id="divC">
					C
				</div>
				B
			</div>
			A
		</div>
		
		<script>
			
			// 1。 冒泡 (默认   从里到外)
			divA.onclick = function(){
				alert("A被点击了")
				
			}
			divB.onclick = function(){
				alert("B被点击了")
			}
			divC.onclick = function(){
				alert("C被点击了")
				event.stopPropagation();
			}			
			
			// 2. 捕获  (默认   从外到里)
			// divA.addEventListener("click",function(){
			// 	alert("A被点击了")
			// },true)
			// divB.addEventListener("click",function(){
			// 	alert("B被点击了")
			// },true)
			// divC.addEventListener("click",function(){
			// 	alert("C被点击了")
			// },true)
			
			// 停止继续传递
			// event.stopPropagation();
			// 取消默认处理  (取消某些html元素自己默认的事件处理)
			// event.preventDefault()

		</script>
	</body>
</html>